<?php
include 'ChromePhp.php';
//ChromePhp::log('Hello console!');
//ChromePhp::log($_SERVER);
//ChromePhp::warn('something went wrong!');
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Student Sorting Task</title>
    <style>
        li {
            width: 610px;
        }

        li:first-child {
            border: 1px solid black;
        }

        span {
            display: inline-block;
            width: 100px;
            margin-right: 8.5%;
        }

        input[type="text"] {
            width: 145px;
            margin-right: 0.5%;
        }

        input[type="number"] {
            width: 100px;
            margin-right: 0.5%;
        }
    </style>
    <?php
    if (isset($_POST['firstNameInput']) &&
        isset($_POST['last-name-input']) &&
        isset($_POST['emailInput']) &&
        isset($_POST['scoreInput'])) {
        $firstName = $_POST['firstNameInput'];
        $lastName = $_POST['last-name-input'];
        $email = $_POST['emailInput'];
        $score = $_POST['scoreInput'];

        //$data = array(
        //
        //);
    }
    ?>
</head>
<body>
    <main>
        <section>
            <form action="student-sorting.php" method="post">
                <ul>
                    <li><span>First name:</span><span>Last name:</span><span>Email:</span><span>Exam score:</span></li>
                    <li><input type="text" name="firstNameInput[]" /><input type="text" name="lastNameInput[]" /><input type="text" name="emailInput[]" /><input type="number" name="scoreInput[]" /><button>-</button></li>
                    <li><input type="text" name="firstNameInput" /><input type="text" name="lastNameInput" /><input type="text" name="emailInput" /><input type="number" name="scoreInput" /><button>-</button></li>
                </ul>
                <button>+</button>
                <label for="sort-selection">Sort by:</label>
                <select id="sort-selection">
                    <option>First name</option>
                    <option>Last name</option>
                    <option>Email</option>
                    <option>Exam score</option>
                </select>
                <label for="order-selection">Order:</label>
                <select id="order-selection">
                    <option>Ascending</option>
                    <option>Descending</option>
                </select>
                <input type="submit" value="Submit" />
            </form>
        </section>
    </main>
</body>
</html>